<div id="aa">
<!-- v-loading="loading" -->
    <el-table :data="usersData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="90">
        </el-table-column>
        <el-table-column label="头像" width="120">
            <template slot-scope="scope">
                <img :src="scope.row.photo" alt="">
            </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="160">
        </el-table-column>
        <el-table-column label="性别" width="90">
            <template slot-scope="scope">
                {{sex[scope.row.sex]}}
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机" width="150">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>

        <el-table-column prop="ctime" label="创建时间">
            <template slot-scope="scope">
                {{scope.row.ctime|currency}}
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <!-- 这里是局部作用域 -->
            <template slot-scope="scope">
                <el-button size="small" type="text" @click="huitian(scope)">编辑</el-button>
                <el-button @click="del(scope)" size="small" type="text">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="60%">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" name="username"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-input v-model="form.phone" name="phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" name="email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-input v-model="sex[form.sex]" name="sex"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="ctime">
                <el-input v-model="form.ctime" name="ctime"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="edit">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<script>
    new Vue({
        el: '#aa',
        data: function () {
            return {
                usersData: [],
                sex: ['', '男', '女', '保密'],
                dialogVisible: false,
                loading: true,
                form: {
                    username: '',
                    phone: '',
                    email: '',
                    sex: '',
                    ctime: ''
                }
            }
        },
        created: function () {
            var _this = this
            $.get('/users/get', function (result) {//读取用户信息
                if (result.error == 0) {
                    _this.usersData = result.data
                } else {
                    console.error('数据获取失败')
                }
            }, 'json')
            _this.loading = false
        },
        filters: {
            currency(time) {
                if (new Date(time).getTime() != 0) {
                    var ntime = new Date(time),
                        y = ntime.getFullYear(),
                        m = ntime.getMonth() + 1,
                        d = ntime.getDate()
                    h = ntime.getHours(),
                        mm = ntime.getMinutes(),
                        s = ntime.getSeconds()
                    if (m < 10) {
                        m = '0' + m
                    }
                    if (d < 10) {
                        d = '0' + d
                    }
                    if (h < 10) {
                        h = '0' + h
                    }
                    if (mm < 10) {
                        mm = '0' + mm
                    }
                    if (s < 10) {
                        s = '0' + s
                    }
                    return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s
                }
            }
        },
        methods: {
            del: function (scope) {//删除用户
                var _this = this
                this.$confirm('注意：删除后不可恢复', '确定删除吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (action) {
                        if (action == 'cancel') {
                            return
                        }
                        //  点击删除之后  
                        _this.loading = true

                        $.get('/users/del', { id: scope.row.id }, function (result) {
                            if (result.error == 0) {
                                // 在这里scope$index是索引
                                _this.usersData.splice(scope.$index, 1)
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                })
                            } else {
                                console.error('删除失败')
                            }
                            _this.loading = false
                        })
                    }
                })
            },
            huitian: function (scope) {
                var _this = this
                _this.dialogVisible = true
                _this.form.id = scope.row.id
                _this.form.username = scope.row.username
                _this.form.phone = scope.row.phone
                _this.form.email = scope.row.email
                _this.form.sex = scope.row.sex
                _this.form.ctime = scope.row.ctime
            },
            edit: function (data) {//编辑用户信息
                var _this = this
                this.$confirm('编辑用户', '确定提交吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    callback: function (action) {
                        if (action == 'confirm') {
                            _this.loading = true
                            $.post('/users/edit', {
                                id: _this.form.id,
                                username: _this.form.username,
                                phone: _this.form.phone,
                                email: _this.form.email,
                                sex: _this.form.sex,
                            }, function (result) {
                                _this.loading = false
                                _this.dialogVisible = false
                                _this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                })
                            })
                        } else {
                            _this.dialogVisible = false
                            _this.$message({
                                type: 'info',
                                message: '编辑失败'
                            });
                        }
                    }
                })
            }
        }
    })
</script>
<style>
</style>